<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import User from '@/components/User.vue'
import { useAppStore, useCoreStore, insStoreRefsArray } from '@/stores'
const [[appStore, refApp]] = insStoreRefsArray([useAppStore, useCoreStore])

import $router from '@/router'
const $route = useRoute()
const user = refApp.user

onMounted(() => {
  console.log('route==>', $route.path)
})

function onRegister() {
  $router.push('/register')
}
function onLogin() {
  $router.push('/login')
}

const items = ref([
  {
    label: '首页',
    route: '/'
  },
  {
    label: '金融产品',
    route: '/jrcp'
  },
  {
    label: '融资服务',
    route: '/rzfw'
  },
  {
    label: '投资机构',
    route: '/tzjg'
  },
  {
    label: '企业征信',
    target: '_blank',
    url: 'https://www.czjsjrfw.net:2112/dlzxxt/a/login'
  },
  {
    label: '政策资讯',
    route: '/zczx'
  },
  {
    label: '联系我们',
    route: '/contact_us'
  }
])
const index = items.value.findIndex((item) => item.route || item.route.includes($route.path)) || 0
const active = ref(index)
</script>

<template>
  <div class="w-full top-0 z-5 bg-white sticky shadow-2">
    <div class="container mx-auto flex justify-content-between justify-items-center pt-5">
      <div class="flex flex-column justify-content-start justify-items-center text-sky-700">
        <div class="font-medium text-4xl">大连市融资信用服务平台</div>
        <div class="font-medium text-xl">大连市地方征信平台</div>
      </div>

      <div v-if="false" class="flex flex-column">
        <header class="container flex justify-content-end align-items-center p-1">
          <section v-if="!user" class="flex justify-content-start align-items-center">
            <Button label="登录" @click="onLogin()" text />
            <Button label="注册" @click="onRegister()" text />
          </section>
          <User v-if="user" />
        </header>
      </div>
    </div>
    <div class="font-2xl">
      <TabMenu v-model:activeIndex="active" :model="items">
        <template #item="{ item, props }">
          <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
            <a :href="href" v-bind="props.action" @click="navigate">
              <span :class="item.icon" />
              <span class="ml-2">{{ item.label }}</span>
            </a>
          </router-link>
          <a v-else :href="item.url" :target="item.target" v-bind="props.action">
            <span :class="item.icon" />
            <span class="ml-2">{{ item.label }}</span>
          </a>
        </template>
      </TabMenu>
    </div>
  </div>
</template>
<style scoped>
:deep(.p-menubar) {
  background-color: white;
}
:deep(.p-tabmenuitem) {
  font-size: 1.5rem;
  font-weight: bolder !important;
}
</style>
